<template>
<div>
   
  <router-view class="Router"></router-view>

    
  <cube-tab-bar
    v-model="selectedLabelDefault"
    :data="tabs"
    @click="clickHandler"
    @change="changeHandler">
  </cube-tab-bar>
  <span class="countsom">{{countsum}}</span>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
export default {
    
  data () {
    return {
        transitionName:"slider-right",
      selectedLabelDefault: '首页',
      tabs: [{
        label: '首页',
        icon: 'cubeic-home'
      }, {
        label: '分类',
        icon: 'cubeic-like'
      }, {
        label: '搜索',
        icon: 'cubeic-vip'
      }, {
        label: '购物车',
        icon: 'cubeic-vip'
      },{
        label: '我的',
        icon: 'cubeic-person'
      }]
    }
  },
  methods: {
    clickHandler (label) {
      // if you clicked home tab, then print 'Home'
      console.log(label)
    },
    changeHandler (label) {
      // if you clicked different tab, this methods can be emitted
      switch(label){
          case '首页':
          this.$router.push({path:"/batnav/index"});
          break;
          case '分类':
          this.$router.push({path:"/batnav/fenleilist"});
          break;
          case '搜索':
          this.$router.push({path:"/batnav/search"});
          break;
          case '购物车':
          this.$router.push({path:"/batnav/gshop"});
          break;
          case '我的':
          this.$router.push({path:"/batnav/my"});
          break;
      }
    }
  },
 
  created(){
      switch(this.$route.path){
          case '/batnav/index':
         this.selectedLabelDefault='首页';
         break;
         case '/batnav/fenleilist':
         this.selectedLabelDefault='分类';
         break;
         case '/batnav/search':
         this.selectedLabelDefault='搜索';
         break;
         case '/batnav/gshop':
         this.selectedLabelDefault='购物车';
         break;
         case '/batnav/my':
         this.selectedLabelDefault='我的';
         break;
      }
  },
   computed:{
       ...mapGetters({
           countsum:'countsum'
       })
  },
}
</script>
<style>
.cube-tab-bar{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: #fff;
}
.cube-tab-bar .cube-tab div{
    font-size: 16px;  
}
.cube-tab-bar .cube-tab i{
    font-size: 20px;
}
.Router{
    position: absolute;
    width: 100%;
    transition:all 0.5s ease;
}
.Router .slide-left-enter,.slide-right-leave-active{
    opacity: 0;
    -webkit-transform:translate(100%,0);
    transform: translate(100%,0);
}
.Router .slide-left-leave-active,.slide-right-enter{
     opacity: 0;
    -webkit-transform:translate(100%,0);
    transform: translate(100%,0);
}
.countsom{
    position: fixed;
    bottom: 33px;
    right:23%;
    z-index: 1001;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    font-size: 12px;
    background: red;
    color:#fff;
}
</style>